<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>社会民生</title><!--引入echarts.js-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <#--图表-->
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
</head>
<body>
<div id="content" style="background: white;">
    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 一、用户数峰值 </div>
    <div style="text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px; " > 截至目前，统计到的各区域用户峰值以及出现时间如下表所示： </div>
    <table id='table1' style="margin-top:15px;">
        <tr>
            <th>地市</th>
            <th>区县</th>
            <th>用户峰值</th>
            <th width="210">出现时间</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表一 用户数峰值统计</div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 二、外省流动用户趋势 </div>
    <div id="my_echarts2" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 外省流动用户趋势图</div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 三、境外用户趋势 </div>
    <div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，省内的境外用户趋势如下图所示： </div>
    <div id="my_echarts3" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图2 境外用户趋势图</div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 四、旅游用户趋势 </div>
    <div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，旅游用户数量变化趋势如下图所示： </div>
    <div style="width: 1000px;margin: 16px auto;overflow: hidden;">
        <div style="float: left;font-size: 18px;font-weight: bold;">旅游用户趋势</div>
        <select id="areaId" style="float: right;padding: 5px;min-width: 100px;" onchange="change()"></select>
    </div>
    <div id="my_echarts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div id="desc-tourist-trend" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 旅游用户数量变化趋势</div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 五、省外人员流入流出趋势 </div>
    <div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，省外人员流入流出趋势如下图所示： </div>
    <div id="my_echarts5" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 省外人员流入流出趋势图</div>

    <div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 六、境外人员流入流出趋势 </div>
    <div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，境外人员流入流出趋势如下图所示： </div>
    <div id="my_echarts6" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图5 境外人员流入流出趋势图</div>
</div>
<script>
    var result4 = ${touristDtoList}
    /*var result4 = {
       "三沙市": [
           { "count": "16", "date": "2022-05-27" },
           { "count": "10", "date": "2022-06-01" },
           { "count": "4", "date": "2022-05-29" },
           { "count": "3", "date": "2022-05-30" },
           { "count": "3", "date": "2022-05-31" },
           { "count": "2", "date": "2022-05-28" }
       ],
       "昌江黎族自治县": [
           { "count": "512", "date": "2022-06-01" },
           { "count": "506", "date": "2022-05-29" },
           { "count": "487", "date": "2022-05-30" },
           { "count": "480", "date": "2022-05-27" },
           { "count": "464", "date": "2022-05-31" },
           { "count": "407", "date": "2022-05-28" }
       ],
       "临高县": [
           { "count": "214", "date": "2022-05-31" },
           { "count": "186", "date": "2022-05-30" },
           { "count": "173", "date": "2022-06-01" },
           { "count": "166", "date": "2022-05-27" },
           { "count": "138", "date": "2022-05-29" },
           { "count": "130", "date": "2022-05-28" }
       ],
       "龙华区": [
           { "count": "372", "date": "2022-05-30" },
           { "count": "332", "date": "2022-05-29" },
           { "count": "330", "date": "2022-06-01" },
           { "count": "324", "date": "2022-05-31" },
           { "count": "293", "date": "2022-05-27" },
           { "count": "141", "date": "2022-05-28" }
       ],
       "琼中黎族苗族自治县": [
           { "count": "40", "date": "2022-05-29" },
           { "count": "36", "date": "2022-05-30" },
           { "count": "36", "date": "2022-05-31" },
           { "count": "27", "date": "2022-05-27" },
           { "count": "27", "date": "2022-06-01" },
           { "count": "20", "date": "2022-05-28" }
       ],
       "屯昌县": [
           { "count": "229", "date": "2022-06-01" },
           { "count": "216", "date": "2022-05-30" },
           { "count": "201", "date": "2022-05-31" },
           { "count": "180", "date": "2022-05-29" },
           { "count": "175", "date": "2022-05-27" },
           { "count": "162", "date": "2022-05-28" }
       ],
       "琼海市": [
           { "count": "1802", "date": "2022-06-01" },
           { "count": "1619", "date": "2022-05-30" },
           { "count": "1471", "date": "2022-05-31" },
           { "count": "1313", "date": "2022-05-29" },
           { "count": "1106", "date": "2022-05-28" },
           { "count": "891", "date": "2022-05-27" }
       ],
       "陵水黎族自治县": [
           { "count": "2058", "date": "2022-06-01" },
           { "count": "2016", "date": "2022-05-31" },
           { "count": "1918", "date": "2022-05-30" },
           { "count": "1605", "date": "2022-05-29" },
           { "count": "1446", "date": "2022-05-27" },
           { "count": "1373", "date": "2022-05-28" }
       ],
       "澄迈县": [
           { "count": "271", "date": "2022-05-30" },
           { "count": "254", "date": "2022-05-31" },
           { "count": "219", "date": "2022-05-29" },
           { "count": "212", "date": "2022-06-01" },
           { "count": "192", "date": "2022-05-27" },
           { "count": "131", "date": "2022-05-28" }
       ],
       "秀英区": [
           { "count": "262", "date": "2022-05-30" },
           { "count": "261", "date": "2022-05-31" },
           { "count": "253", "date": "2022-06-01" },
           { "count": "184", "date": "2022-05-29" },
           { "count": "168", "date": "2022-05-27" },
           { "count": "137", "date": "2022-05-28" }
       ],
       "美兰区": [
           { "count": "371", "date": "2022-05-31" },
           { "count": "327", "date": "2022-06-01" },
           { "count": "311", "date": "2022-05-30" },
           { "count": "239", "date": "2022-05-29" },
           { "count": "235", "date": "2022-05-27" },
           { "count": "136", "date": "2022-05-28" }
       ],
       "海口市": [
           { "count": "9366", "date": "2022-05-30" },
           { "count": "8707", "date": "2022-05-31" },
           { "count": "8057", "date": "2022-06-01" },
           { "count": "7619", "date": "2022-05-29" },
           { "count": "6948", "date": "2022-05-27" },
           { "count": "5989", "date": "2022-05-28" }
       ],
       "保亭黎族苗族自治县": [
           { "count": "1406", "date": "2022-05-30" },
           { "count": "1258", "date": "2022-05-29" },
           { "count": "1254", "date": "2022-06-01" },
           { "count": "1215", "date": "2022-05-31" },
           { "count": "1123", "date": "2022-05-27" },
           { "count": "770", "date": "2022-05-28" }
       ],
       "定安县": [
           { "count": "125", "date": "2022-05-30" },
           { "count": "125", "date": "2022-06-01" },
           { "count": "117", "date": "2022-05-31" },
           { "count": "107", "date": "2022-05-29" },
           { "count": "90", "date": "2022-05-27" },
           { "count": "60", "date": "2022-05-28" }
       ],
       "五指山市": [
           { "count": "46", "date": "2022-06-01" },
           { "count": "35", "date": "2022-05-29" },
           { "count": "34", "date": "2022-05-30" },
           { "count": "30", "date": "2022-05-31" },
           { "count": "20", "date": "2022-05-28" },
           { "count": "19", "date": "2022-05-27" }
       ],
       "东方市": [
           { "count": "1779", "date": "2022-05-30" },
           { "count": "1724", "date": "2022-05-31" },
           { "count": "1686", "date": "2022-06-01" },
           { "count": "1619", "date": "2022-05-29" },
           { "count": "1541", "date": "2022-05-27" },
           { "count": "1200", "date": "2022-05-28" }
       ],
       "文昌市": [
           { "count": "146", "date": "2022-05-29" },
           { "count": "144", "date": "2022-05-31" },
           { "count": "141", "date": "2022-05-30" },
           { "count": "136", "date": "2022-06-01" },
           { "count": "97", "date": "2022-05-28" },
           { "count": "84", "date": "2022-05-27" }
       ],
       "儋州市": [
           { "count": "476", "date": "2022-05-30" },
           { "count": "469", "date": "2022-05-31" },
           { "count": "406", "date": "2022-06-01" },
           { "count": "370", "date": "2022-05-27" },
           { "count": "366", "date": "2022-05-29" },
           { "count": "335", "date": "2022-05-28" }
       ],
       "万宁市": [
           { "count": "1525", "date": "2022-05-31" },
           { "count": "1483", "date": "2022-05-30" },
           { "count": "1404", "date": "2022-05-29" },
           { "count": "1303", "date": "2022-06-01" },
           { "count": "1091", "date": "2022-05-28" },
           { "count": "1057", "date": "2022-05-27" }
       ],
       "白沙黎族自治县": [
           { "count": "28", "date": "2022-05-30" },
           { "count": "26", "date": "2022-05-29" },
           { "count": "26", "date": "2022-05-31" },
           { "count": "22", "date": "2022-06-01" },
           { "count": "21", "date": "2022-05-28" },
           { "count": "17", "date": "2022-05-27" }
       ],
       "琼山区": [
           { "count": "88", "date": "2022-05-30" },
           { "count": "80", "date": "2022-05-31" },
           { "count": "67", "date": "2022-06-01" },
           { "count": "59", "date": "2022-05-27" },
           { "count": "52", "date": "2022-05-29" },
           { "count": "48", "date": "2022-05-28" }
       ],
       "乐东黎族自治县": [
           { "count": "1675", "date": "2022-05-30" },
           { "count": "1502", "date": "2022-05-31" },
           { "count": "1463", "date": "2022-05-29" },
           { "count": "1380", "date": "2022-06-01" },
           { "count": "1312", "date": "2022-05-27" },
           { "count": "1096", "date": "2022-05-28" }
       ],
       "三亚市": [
           { "count": "10436", "date": "2022-05-30" },
           { "count": "10404", "date": "2022-05-31" },
           { "count": "10013", "date": "2022-06-01" },
           { "count": "9420", "date": "2022-05-29" },
           { "count": "8405", "date": "2022-05-27" },
           { "count": "7970", "date": "2022-05-28" }
       ]}*/
    $(document).ready(function () {
        // 一、用户数峰值
        /*var dataTable1 = [
            {z1: '海口市', z2: '琼山区', z3: '1800', z4: '2022-01-55 12:55:44'}
        ];*/
        $("#desc-tourist-trend").text("${descTouristTrend}");
        var dataTable1 = ${userPeakDtoList}
        $.each(dataTable1,function(index,item){
            var tr='<td>'+item.city+'</td>'+'<td>'+item.county+'</td>'+'<td>'+item.count+'</td>'+'<td>'+item.date+'</td>';
            $("#table1").append('<tr>'+tr+'</tr>')
        });

        var result1 = [
            {time: '05-21', count: 15},
            {time: '05-22', count: 55},
            {time: '05-23', count: 1},
            {time: '05-24', count: 75},
            {time: '05-25', count: 75},
            {time: '05-26', count: 75},
        ];

        // 二、外省流动用户趋势
        var result2 = ${outProvinceFlowUserList};
        var echarts2 = echarts.init(document.getElementById("my_echarts2"));
        var series2 = getSCategory(result2, 1).series;
        var xCategory2 = getSCategory(result2, 1).xCategory;
        var optionLine2 = getOption(xCategory2, series2, '外省流动用户趋势');
        echarts2.setOption(optionLine2);

        // 三、境外用户趋势
        var result3 = ${AbroadFlowUserList}
        var echarts3 = echarts.init(document.getElementById("my_echarts3"));
        var series3 = getSCategory(result3, 1).series;
        var xCategory3 = getSCategory(result3, 1).xCategory;
        var optionLine3 = getOption(xCategory3, series3, '境外用户趋势');
        echarts3.setOption(optionLine3);

        // 四、旅游用户趋势
        var resultKey = [], resultData = [];
        $.each(result4,function(key, item) {
            resultKey.push(key);
            var option="<option value="+key+">"+key+"</option>";
            $("#areaId").append(option)
        });
        // 取第一个的值
        resultData = resultKey.length>0? result4[resultKey[0]]: [];
        initEcharts(resultData);

        // 五、省外人员流入流出趋势
        var result5 = [
            {
                type: '人员流入',
                datas: ${outIslandFlowInUser}
            },
            {
                type: '人员流出',
                datas: ${outIslandFlowOutUser}
            },
        ]
        var echarts5 = echarts.init(document.getElementById("my_echarts5"));
        var series5 = getSCategory(result5, 2).series;
        var xCategory5 = getSCategory(result5, 2).xCategory;
        var legend5 = ['人员流入', '人员流出'];
        var optionLine5 = getOption(xCategory5, series5, '省外人员流入流出趋势', legend5, ['#4b91ff', '#f2637b', '#fad337']);
        echarts5.setOption(optionLine5);

        // 六、境外人员流入流出趋势
        var result6 = [
            {
                type: '人员流入',
                datas: ${abroadFlowInUser}
            },
            {
                type: '人员流出',
                datas: ${abroadFlowOutUser}
            },
        ]
        var echarts6 = echarts.init(document.getElementById("my_echarts6"));
        var series6 = getSCategory(result6, 2).series;
        var xCategory6 = getSCategory(result6, 2).xCategory;
        var legend6 = ['人员流入', '人员流出'];
        var optionLine6 = getOption(xCategory6, series6, '境外人员流入流出趋势', legend6, ['#4b91ff', '#f2637b', '#fad337']);
        echarts6.setOption(optionLine6);
    })
    function getOption(xCategory, series, title, legend, color) {
        return {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
            },
            color: color? color: ['#4b91ff'],
            legend: {
                show: legend?true: false,
                data: legend,
                icon: 'circle',
                right: '4%'
            },
            grid: {
                left: "8%",
                right: "4%",
                bottom: "5%",
                containLabel: false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xCategory,
            },
            yAxis: {
                type: 'value'
            },
            series: series
        }
    }
    function getSCategory(result, type) {
        var series = [], xCategory = [], data = [];
        $.each(result,function(index,item) {
            if(type===1) {
                data.push(item.count);
                xCategory.push(item.date);
                if(index === (result.length-1)) {
                    series.push({ type: 'line', data: data, areaStyle: {opacity: 0.3} })
                }
            } else if(type===2) {
                var obj = { name: '', type: 'line', data: [] };
                var count = $.map(item.datas, function(n, i){ return n.count; });
                if(index===0) {
                    xCategory = $.map(item.datas, function(n, i){ return n.date; })
                }
                obj.name = item.type;
                obj.data = count;
                series.push(obj);
            }
        });
        return {
            series,
            xCategory
        }
    }
    // 旅游用户数量变化趋势
    function initEcharts(datas) {
        var myecharts = echarts.init(document.getElementById("my_echarts4"));
        var series = getSCategory(datas, 1).series;
        var xCategory = getSCategory(datas, 1).xCategory;
        var optionLine = getOption(xCategory, series);
        myecharts.setOption(optionLine);
    }
    function change() {
        var areaId = document.getElementById('areaId');
        var d1 = areaId.options[areaId.selectedIndex].value;
        var d2 = areaId.value;
        initEcharts(result4[d2])
    }
</script>
<style>
    table th, table td { border-bottom: 0.5px solid #999;border-right: 0.5px solid #999999; }
    table { border-top: 0.5px solid #999; border-left: 0.5px solid #999;width: 800px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;margin: 0 auto;font-size: 20px;}
</style>
</body>
</html>